<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!--IE Compatibility modes-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--Mobile first-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>403</title>

    <meta name="description" content="Free Admin Template Based On Twitter Bootstrap 3.x">
    <meta name="author" content="">

    <meta name="msapplication-TileColor" content="#5bc0de"/>
    <meta name="msapplication-TileImage" content="assets/img/metis-tile.png"/>

    <link rel="stylesheet" href="/assets/lib/layerui/css/layui.css" media="all">

    <!-- Bootstrap -->
    <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <!--<link rel="stylesheet" href="assets/lib/font-awesome/css/font-awesome.min.css">-->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/lib/bootstrap-table/bootstrap-table.min.css">
    <link rel="stylesheet" href="/assets/lib/bootstrap-switch/css/bootstrap3/bootstrap-switch.min.css">
    <!-- Metis core stylesheet -->
    <link rel="stylesheet" href="/assets/css/main.css">
    <!-- animate.css stylesheet -->
    <link rel="stylesheet" href="/assets/lib/animate.css/animate.css"/>
    <link rel="stylesheet" href="/assets/lib/select2/css/select2.min.css"/>
    <link rel="stylesheet" href="/assets/lib/bootstrap-validator/css/bootstrapValidator.min.css"/>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <style>
        .text_info {
            border: 0px;
        }
    </style>


    <![endif]-->
</head>

<body>
<div class="bg-dark dk" id="wrap" style="height:50px;">
    <header class="head">
        <div class="">
            <ol class="breadcrumb" style="background-color: #3a3a3a">
                <li><a href="#"> <i class="fa fa-home"> 平台流水中心</i></a></li>
                <li class="active">公司奖金池流水</li>
            </ol>
        </div>
        <!-- /.main-bar -->
    </header>
</div>
<div class="container" style="width:100%;">
    <div class="row">
        <div class="col-lg-12">
            <div class="box dark">
                <header>
                    <div class="icons"><i class="fa fa-th-large"></i></div>
                    <h5>查询</h5>
                    <!-- .toolbar -->
                    <div class="toolbar">
                        <nav style="padding: 8px;">
                        </nav>
                    </div>            <!-- /.toolbar -->
                </header>
                <div id="div-1" class="body">
                    <form id="validVal" class="form-inline">
                        <div class="form-group">
                            <label for="name">姓名&nbsp;</label>
                            <input type="text" name="name" class="form-control" id="name"
                                   placeholder="请输入姓名">
                        </div>
                        <div class="form-group">
                            <label for="phone">手机号&nbsp;</label>
                            <input type="text" name="phone" class="form-control" id="phone"
                                   placeholder="请输入手机号">
                        </div>
                        <div class="form-group">
                            <label for="fromNum">来源单号&nbsp;</label>
                            <input type="text" name="fromNum" class="form-control" id="fromNum"
                                   placeholder="请输入来源单号">
                        </div>


                        <div class="form-group"  style="padding: 2px;">
                            <label for="begin_createTime">生成时间&nbsp;</label>
                            <input type="text" name="begin_createTime" class="form-control" id="begin_createTime" placeholder="请输入开始创建时间">-
                            <input type="text" name="end_createTime" class="form-control" id="end_createTime" placeholder="请输入结束创建时间">
                        </div>

                        <button type="button" class="btn btn-success search_button">提交</button>

                    </form>
                </div>
            </div>
        </div>

        <!--END TEXT INPUT FIELD-->
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="box">
                <div id="collapse4" class="body">
                    <!-- <div id="toolbar" style="margin-bottom: 5px;">
                         <div id="toolbar" style="margin-bottom: 5px;">
                             <div class="btn-group">
                                 <button type="button"data-toggle="modal"   data-target="#add_modal" class="btn btn-default"><i class="fa fa-plus"></i>&nbsp;新增 </button>
                             </div>
                         </div>
                     </div>-->
                    <table id="dataTable" class="table table-bordered table-condensed table-hover table-striped">
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

</div>
<!--jQuery -->
<script src="/assets/lib/jquery/jquery.min.js"></script>
<!--Bootstrap -->
<script src="/assets/lib/bootstrap/js/bootstrap.min.js"></script>
<script src="/assets/lib/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/assets/lib/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/assets/lib/bootstrap-switch/js/bootstrap-switch.min.js"></script>
<script src="/assets/lib/select2/js/select2.min.js"></script>
<script src="/assets/lib/bootstrap-validator/js/bootstrapValidator.min.js"></script>
<!-- MetisMenu -->
<script src="/assets/lib/metismenu/metisMenu.js"></script>
<!-- Metis core scripts -->
<script src="/assets/js/core.js"></script>
<script src="/assets/js/distpicker.data.js"></script>
<script src="/assets/js/distpicker.js"></script>


<!-- Metis demo scripts -->
<script src="/assets/js/app.js"></script>
<script src="/assets/lib/layer/layer.js"></script>
<script src="/assets/lib/layerui/layui.js"></script>
<script>

    var layer;var laydate;
    layui.use(['layer','laydate'], function(){
        layer= layui.layer;
        laydate = layui.laydate;
        console.log(laydate);
        laydate.render({
            elem: '#begin_createTime' //指定元素
            ,type: 'datetime'
        });
        laydate.render({
            elem: '#end_createTime' //指定元素
            ,type: 'datetime'
        });
        laydate.render({
            elem: '#begin_modifyTime' //指定元素
            ,type: 'datetime'
        });
        laydate.render({
            elem: '#end_modifyTime' //指定元素
            ,type: 'datetime'
        });
    });

    var csrf_token = "${_csrf.token}";
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': csrf_token
        }
    });
    layer.config({
        extend: 'extend/layer.ext.js'
    });

    $(document).ready(function () {



        initTable();

        $(document).on("click", ".search_button", function () {
            $('table').bootstrapTable('refresh');
        });

    });


    function initTable() {
        var url = "/syslog/getCompanyBonusLogs";
        $('#dataTable').bootstrapTable({
            method: 'GET',
            dataType: 'json',
            contentType: "application/x-www-form-urlencoded",
            cache: false,
            striped: true,                              //是否显示行间隔色
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            url: url,
            sortable: true,
            sortName: "createTime",
            sortOrder: 'desc',
            showColumns: false,
            pagination: true,
            queryParams: queryParams,
            minimumCountColumns: 2,
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            uniqueId: "id",                     //每一行的唯一标识，一般为主键列
            showExport: true,
            exportDataType: 'all',
            responseHandler: responseHandler,
            columns: [
                {
                    field: 'id',
                    title: '序列号',
                    align: 'center',
                    valign: 'middle',
                    formatter: function (value, row, index) {
                        var pageSize = $('table').bootstrapTable('getOptions').pageSize;//通过表的#id 可以得到每页多少条
                        var pageNumber = $('table').bootstrapTable('getOptions').pageNumber;//通过表的#id 可以得到当前第几页
//                        return pageSize * (pageNumber - 1) + index + 1;    //返回每条的序号： 每页条数 * （当前页 - 1 ）+ 序号
                        return "<span data-id='" + value + "'>" + (pageSize * (pageNumber - 1) + index + 1) + "</span>";
                    }
                }, {
                    field: 'createTime',
                    title: '日期',
                    align: 'center',
                    valign: 'middle',
                    formatter: function (value, row, index) {
                        return new Date(value).format('yyyy-MM-dd hh:mm:ss');
                    }
                },
                {
                    field: 'name',
                    title: '姓名',
                    align: 'center',
                    valign: 'middle'
                }, {
                    field: 'phone',
                    title: '手机号',
                    align: 'center',
                    valign: 'middle'
                }, {
                    field: 'detail',
                    title: '数量',
                    align: 'center',
                    valign: 'middle'
                }, {
                    field: 'fromNum',
                    title: '来源单号',
                    align: 'center',
                    valign: 'middle'
                }, {
                    field: 'bal',
                    title: '变更后余额',
                    align: 'center',
                    valign: 'middle'
                }, {
                    field: 'description',
                    title: '途径',
                    align: 'center',
                    valign: 'middle'
                }],
            onPostBody: function () {

            }
        });
    }

    function queryParams(params) {
        var param = {
            pageNumber: this.pageNumber,
            pageSize: this.pageSize,
            name: $("form").find("[name='name']").val(),
            phone: $("form").find("[name='phone']").val(),
            fromNum: $("form").find("[name='fromNum']").val(),
            begin_createTime: $("form").find("[name='begin_createTime']").val(),
            end_createTime: $("form").find("[name='end_createTime']").val(),
        };
        return param;
    }

    // 用于server 分页，表格数据量太大的话 不想一次查询所有数据，可以使用server分页查询，数据量小的话可以直接把sidePagination: "server"  改为 sidePagination: "client" ，同时去掉responseHandler: responseHandler就可以了，
    function responseHandler(res) {

        if (res) {
            return {
                "rows": res.result,
                "total": res.totalCount
            };
        } else {
            return {
                "rows": [],
                "total": 0
            };
        }
    }
    $.fn.modal.Constructor.prototype.enforceFocus = function () {
    };
    Date.prototype.format = function (fmt) { //author: meizz
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }
</script>
</body>

</html>
